<template>
	<view>
		<!-- 视频块 -->
		<div id="mui-video"></div>
		<!-- 左方向控制组件 -->

	</view>
</template>
<script scr="js/uni.webview.1.5.2.js"></script>
<script>
	import 'mui-player/dist/mui-player.min.css'
	import MuiPlayer from 'mui-player'
	import Hls from 'hls.js'
	import Flv from 'flv.js'

	export default {
		data() {
			return {
				radio: "A",
				mui_video: null,
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('landscape-primary');
			// #endif
			 window.postMessage("111")
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('landscape-primary');
			// #endif
		},
		// 页面关闭时清除横屏正方向
		onUnload() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('landscape-primary');
			// #endif
		},
		watch: {
			// 播放地址变化
			src(newVal, oldVal) {
				// console.log(newVal, oldVal)
				if (this.mui_video != null) {
					this.mui_video.src = newVal
					this.mui_video.reloadUrl(newVal)
					uni.showToast({
						title: '播放地址变更: ' + newVal,
						icon: 'success',
						duration: 2000
					});
				}
			},
		},
		mounted() {
			this.init();
		},
		methods: {
			sendDCMD(value) {
				let radioText = "";
				if (this.radio === "A") {
					radioText = "摄像头(前)"
				} else if (this.radio === "B") {
					radioText = "摄像头(后)"
				} else if (this.radio === "C") {
					radioText = "小车"
				}
				this.$message('操作' + radioText + '方向控制:' + value);
			},
			RadioChange(value) {
				this.radio = value;
				let radioText = "";
				if (this.radio === "A") {
					radioText = "摄像头(前)"
				} else if (this.radio === "B") {
					radioText = "摄像头(后)"
				} else if (this.radio === "C") {
					radioText = "小车"
				}
				/* 控制对象变更 */
				this.$message('控制对象变更' + radioText);
			},
			init() {
				let src = uni.getStorageSync('mui_video_src') || 'http://192.168.1.168/action/live.flv?stream=0&audio=0';
				this.mui_video = new MuiPlayer({
					container: '#mui-video',
					title: 'home_video',
					// 设置个默认地址 否则会弹出视频为空
					src: src,
					autoplay: true,
					autoFit: true,
					loop: true,
					muted: false,
					live: true,
					objectFit: "cover",
					initFullFixed: true,
					autoOrientaion: true,
					poster: "",
					height: '100%',
					parse: {
						type: 'flv',
						loader: Flv,
						config: {
							debug: false,
						},
					}
				})
				/* 移除右上角的箭头 */
				for (var i = 0; i < document.getElementsByClassName("mplayer-header").length; i++) {
					document.getElementsByClassName("mplayer-header")[i].remove()
				}
				for (var i = 0; i < document.getElementsByClassName("mplayer-footer").length; i++) {
					document.getElementsByClassName("mplayer-footer")[i].remove()
				}
			}
		}
	}
	
	// window.addEventListener('message', (event)=> {
 //      // 监听来自 Uniapp 的消息
 //      const data = event.data;
 //      console.log('接收到来自 Uniapp 的消息:', JSON.stringify(data));
 //    });
	
</script>

<style>
	#mui-video {
		height: 100% !important;
	}

	#bottom_view {
		position: absolute;
		bottom: 61px !important;
		height: 158px;
		padding-top: 5px;
		width: 100%;
		background-color: white;
	}

	#bottom_view #left_view {
		width: 150px;
	}

	#bottom_view #left_view .left_view_image {
		padding: 15px;
	}

	#bottom_view #left_view .left_view_image:hover {}

	#bottom_view .margin-tb-sm {
		margin-top: 7px !important;
		margin-bottom: 7px !important;
	}

	.cu-form-group {
		min-height: 50px !important;
	}
</style>